<template>
	<div class="radio-wrap v-center-box" v-for="(index,one) in options">
		<div class="radio-box" >
			<input type="radio" name="radio_{{radioName}}" v-model="value" id="radio_{{radioName}}_{{index}}" value="{{one.value}}">
			<div class="radio-bg"></div>
		</div>
		<label class="radio-label" for="radio_{{radioName}}_{{index}}" >{{one.text}}</label>
	</div>

</template>

<style lang='sass'>
	@import '../../public/css/common.scss';
	/* .radio-wrap+.radio-wrap{
		margin-left: 0.5rem;
	} */
	.radio-wrap{
		display: inline-block;
		padding: .5rem;
		/* padding: 10px; */
    	background: black;
		margin-right: 0.5rem;
		margin-bottom: .5rem;
		label{
			width: auto;
		}

		.radio-box{
			vertical-align: middle;
			width: 22px;
			height: 22px;
			display: inline-block;
			position: relative;
			input{
				@include opacity(0);
				z-index: 10;
				width: 100%;
				height: 100%;
				margin: 0;
				position: absolute;
				left: 0;
    			right: 0;
    			top:0;
    			bottom: 0;
				&:checked + .radio-bg{
					background: url(../../public/images/radio-bg.png) no-repeat center #00adef;
					background-size: contain;
					box-shadow: none;
					border: 0;
				}
			}
			.radio-bg{
				position: absolute;
			    left: 0;
			    right: 0;
			    bottom: 0;
			    top: 0;
				border: 2px solid #747474;
				@include borderRaduis(50%);
    			@include boxShadow(0px 0px 0px 0px #056184 inset);
			}
		}
	}
</style>

<script >
	export default{
		replace: true,
		props: {
		    options: {				//选项,必须包含value和text字段
		      type: Array,
		      required: true
		    },
		    radioName: {			//组名称,唯一
		    	type: String,
		        required: true
		    },
		    dataValue : {
		    	type: String,
		    	default: "1"
		    }
		},
		data() {
			return {
				value : this.dataValue
			}
		},
		methods:{
			setValue(newVal){
				this.value = newVal;
			},

			getValue(){
				return this.value;
			}
		},
		watch: {
			'value' :{
				handler: function(newValu){
					this.$emit("on-change",newValu);
				}
			}
		}
	}
</script>